<app-nav> </app-nav>
<div class="container overview">
  <div class="col-md-12  pt-5">
    <h3 class="mb-2">Account Balance</h3>
    <div class="row">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-3">
            <a [routerLink]="['/nft/list']">
              <div class="card">
                <div class="card-body">
                  <h3 *ngIf="count">{{ nftBalance }}</h3>
                  <p class="card-text">
                    ERC-721: {{ nftName || 'Public Tokens' }}
                    <span *ngIf="nftSymbol">({{ nftSymbol }})</span>
                  </p>
                </div>
              </div>
            </a>
          </div>

          <div class="col-md-3">
            <a [routerLink]="['/nft-commitment/list']">
              <div class="card">
                <div class="card-body">
                  <h3 *ngIf="count">{{ count.nftCommitmentCount ? count.nftCommitmentCount : '0' }}</h3>
                  <p class="card-text">{{ nftName }} Commitments</p>
                </div>
              </div>
            </a>
          </div>

          <div class="col-md-3">
            <div class="card">
              <div class="card-body">
                <h3>{{ ftBalance }}</h3>
                <p class="card-text">
                  ERC-20: {{ ftName || '' }} <span *ngIf="ftSymbol">({{ ftSymbol }})</span>
                </p>
              </div>
            </div>
          </div>

          <div class="col-md-3">
            <a [routerLink]="['/ft-commitment/list']">
              <div class="card">
                <div class="card-body">
                  <h3 *ngIf="count">{{ count.ftCommitmentCount ? count.ftCommitmentCount : '0' }}</h3>
                  <p class="card-text">{{ ftName }} Commitments</p>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-4">
      <div class="col-md-12">
        <h3 class="mb-2">Actions</h3>
        <div class="row mb-3">
          <div class="col-md-3">
            <a class="btn btn-primary btn-list" [routerLink]="['/nft/mint']"
              >Mint {{ nftName || 'Public Token' }}</a
            >
            <a class="btn btn-primary btn-list" [routerLink]="['/nft/transfer']"
              >Transfer {{ nftName || 'Public Token' }}</a
            >
            <a class="btn btn-primary btn-list" [routerLink]="['/nft/burn']"
              >Burn {{ nftName || 'Public Token' }}</a
            >
          </div>

          <div class="col-md-3">
            <a class="btn btn-primary btn-list" [routerLink]="['/nft-commitment/mint']"
              >Mint {{ nftName }} Commitment</a
            >
            <a class="btn btn-primary btn-list" [routerLink]="['/nft-commitment/transfer']"
              >Transfer {{ nftName }} Commitment</a
            >
            <a class="btn btn-primary btn-list" [routerLink]="['/nft-commitment/burn']"
              >Burn {{ nftName }} Commitment</a
            >
          </div>

          <div class="col-md-3">
            <a class="btn btn-primary btn-list" [routerLink]="['/ft/mint']"
              >Mint {{ ftName || '' }}</a
            >
            <a class="btn btn-primary btn-list" [routerLink]="['/ft/transfer']"
              >Transfer {{ ftName || '' }}</a
            >
            <a class="btn btn-primary btn-list" [routerLink]="['/ft/burn']"
              >Burn {{ ftName || '' }}</a
            >
          </div>

          <div class="col-md-3">
            <a class="btn btn-primary btn-list ft-commitment" [routerLink]="['/ft-commitment/mint']"
              >Mint {{ ftName }} Commitment</a
            >
            <a class="btn btn-primary btn-list ft-commitment" [routerLink]="['/ft-commitment/transfer']"
              >Transfer {{ ftName }} Commitment</a
            >
            <a class="btn btn-primary btn-list ft-commitment" [routerLink]="['/ft-commitment/batch-transfer']"
              >Batch Transfer {{ ftName }} Commitment</a
            >
            <a class="btn btn-primary btn-list ft-commitment" [routerLink]="['/ft-commitment/burn']"
              >Burn {{ ftName }} Commitment</a
            >
          </div>
        </div>
      </div>
    </div>
    <div class="row   mb-3">
      <div class="col-sm-12">
        <h3 class="mb-2">Transactions History</h3>
        <ngb-tabset activeId="{{ selectedTab }}">
          <ngb-tab id="nft">
            <ng-template ngbTabTitle>
              <div (click)="getTransactions('nft')">
                <strong>{{ nftName }}</strong>
              </div>
            </ng-template>
            <ng-template ngbTabContent>
              <table class="table  table-hover">
                <thead>
                  <tr>
                    <th>Type</th>
                    <th>Token ID</th>
                    <th>URI</th>
                    <th>Date</th>
                    <th>Send To</th>
                    <th>Received from</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let transaction of nftTransactions">
                    <td>{{ utilService.replaceUnderscores(transaction.transactionType) }}</td>
                    <td [title]="transaction.tokenId">
                      {{ transaction.tokenId.slice(0, 20) }}....
                    </td>
                    <td>{{ transaction.tokenUri }}</td>
                    <td>{{ transaction.createdAt | date: 'dd/MM/yyyy hh:mm:ss a' }}</td>
                    <td>
                      {{
                        transaction.transactionType !== 'transfer_incoming' && transaction.receiver
                          ? transaction.receiver.name
                          : ''
                      }}
                    </td>
                    <td>
                      {{
                        transaction.transactionType === 'transfer_incoming' && transaction.sender
                          ? transaction.sender.name
                          : ''
                      }}
                    </td>
                  </tr>
                </tbody>
              </table>
              <ngb-pagination
                *ngIf="isPagination"
                class="d-flex justify-content-end zkp-pagination"
                (pageChange)="pageChanged($event)"
                [collectionSize]="totalCollection | async"
                [pageSize]="pageSize"
                [(page)]="pageNo"
                aria-label="Default pagination"
              ></ngb-pagination>
            </ng-template>
          </ngb-tab>

          <ngb-tab id="nft-commitment">
            <ng-template ngbTabTitle>
              <div (click)="getTransactions('nft-commitment')">
                <strong>{{ nftName }} Commitment</strong>
              </div>
            </ng-template>
            <ng-template ngbTabContent>
              <table class="table  table-hover">
                <thead>
                  <tr>
                    <th>Type</th>
                    <th>Token ID</th>
                    <th>URI</th>
                    <th>Date</th>
                    <th>Send To</th>
                    <th>Received From</th>
                  </tr>
                </thead>
                <tbody>
                  <ng-container *ngFor="let transaction of nftCommitmentTransactions">
                    <tr *ngIf="transaction.transactionType === 'mint'">
                      <td>{{ utilService.replaceUnderscores(transaction.transactionType) }}</td>
                      <td *ngIf="!transaction.isFailed" [title]="transaction.outputCommitments[0].tokenId">{{ transaction.outputCommitments[0].tokenId.slice(0, 20) }}....</td>
                      <td *ngIf="transaction.isFailed">
                        <i class="fa fa-ban" aria-hidden="true"></i>
                        <span class="tx-failed">TRANSACTION FAILED</span>
                      </td>
                      <td>{{ transaction.outputCommitments[0].tokenUri }}</td>
                      <td>{{ transaction.createdAt | date: 'dd/MM/yyyy hh:mm:ss a' }}</td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr *ngIf="transaction.transactionType === 'transfer_outgoing'">
                      <td>{{ utilService.replaceUnderscores(transaction.transactionType) }}</td>
                      <td *ngIf="!transaction.isFailed" [title]="transaction.outputCommitments[0].tokenId">{{ transaction.outputCommitments[0].tokenId.slice(0, 20) }}....</td>
                      <td *ngIf="transaction.isFailed">
                        <i class="fa fa-ban" aria-hidden="true"></i>
                        <span class="tx-failed">TRANSACTION FAILED</span>
                      </td>
                      <td>{{ transaction.outputCommitments[0].tokenUri }}</td>
                      <td>{{ transaction.createdAt | date: 'dd/MM/yyyy hh:mm:ss a' }}</td>
                      <td>{{ transaction.receiver.name }}</td>
                      <td></td>
                    </tr>
                    <tr *ngIf="transaction.transactionType === 'transfer_incoming'">
                      <td>{{ utilService.replaceUnderscores(transaction.transactionType) }}</td>
                      <td [title]="transaction.outputCommitments[0].tokenId">{{ transaction.outputCommitments[0].tokenId.slice(0, 20) }}....</td>
                      <td>{{ transaction.outputCommitments[0].tokenUri }}</td>
                      <td>{{ transaction.createdAt | date: 'dd/MM/yyyy hh:mm:ss a' }}</td>
                      <td></td>
                      <td>{{ transaction.sender.name }}</td>
                    </tr>
                    <tr *ngIf="transaction.transactionType === 'burn'">
                      <td>{{ utilService.replaceUnderscores(transaction.transactionType) }}</td>
                      <td *ngIf="!transaction.isFailed" [title]="transaction.inputCommitments[0].tokenId">{{ transaction.inputCommitments[0].tokenId.slice(0, 20) }}....</td>
                       <td *ngIf="transaction.isFailed">
                        <i class="fa fa-ban" aria-hidden="true"></i>
                        <span class="tx-failed">TRANSACTION FAILED</span>
                      </td>
                      <td>{{ transaction.inputCommitments[0].tokenUri }}</td>
                      <td>{{ transaction.createdAt | date: 'dd/MM/yyyy hh:mm:ss a' }}</td>
                      <td>{{ transaction.receiver.name }}</td>
                      <td></td>
                    </tr>
                  </ng-container>
                </tbody>
              </table>
              <ngb-pagination
                *ngIf="isPagination"
                class="d-flex justify-content-end zkp-pagination"
                (pageChange)="pageChanged($event)"
                [collectionSize]="totalCollection | async"
                [pageSize]="pageSize"
                [(page)]="pageNo"
                aria-label="Default pagination"
              ></ngb-pagination>
            </ng-template>
          </ngb-tab>

          <ngb-tab id="ft">
            <ng-template ngbTabTitle>
              <div (click)="getTransactions('ft')">
                <strong>{{ ftName }}</strong>
              </div>
            </ng-template>
            <ng-template ngbTabContent>
              <table class="table  table-hover">
                <thead>
                  <tr>
                    <th>Type</th>
                    <th>Amount</th>
                    <th>Date</th>
                    <th>Send To</th>
                    <th>Received From</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let transaction of ftTransactions">
                    <td>{{ utilService.replaceUnderscores(transaction.transactionType) }}</td>
                    <td>{{ ftSymbol + ' ' + transaction.value }}</td>
                    <td>{{ transaction.createdAt | date: 'dd/MM/yyyy hh:mm:ss a' }}</td>
                    <td *ngIf="transaction.transactionType === 'transfer_outgoing'">
                      {{ transaction.receiver ? transaction.receiver.name : '' }}
                    </td>
                    <td *ngIf="transaction.transactionType !== 'transfer_outgoing'"></td>
                    <td *ngIf="transaction.transactionType === 'transfer_incoming'">
                      {{ transaction.sender ? transaction.sender.name : '' }}
                    </td>
                    <td *ngIf="transaction.transactionType !== 'transfer_incoming'"></td>
                  </tr>
                </tbody>
              </table>
              <ngb-pagination
                *ngIf="isPagination"
                class="d-flex justify-content-end zkp-pagination"
                (pageChange)="pageChanged($event)"
                [collectionSize]="totalCollection | async"
                [pageSize]="pageSize"
                [(page)]="pageNo"
                aria-label="Default pagination"
              ></ngb-pagination>
            </ng-template>
          </ngb-tab>

          <ngb-tab id="ft-commitment">
            <ng-template ngbTabTitle>
              <div (click)="getTransactions('ft-commitment')">
                <strong>{{ ftName }} Commitment</strong>
              </div>
            </ng-template>
            <ng-template ngbTabContent>
              <table class="table  table-hover ft-commitment-table">
                <thead>
                  <tr>
                    <th>Type</th>
                    <th>Amount</th>
                    <th>Commitment</th>
                    <th>Date</th>
                    <th>Send To</th>
                    <th>Received From</th>
                  </tr>
                </thead>
                <tbody>
                  <ng-container *ngFor="let transaction of ftCommitmentTransactions; index as i">

                    <tr *ngIf="transaction.transactionType === 'mint'">
                      <td>{{ utilService.replaceUnderscores(transaction.transactionType) }}</td>
                      <td >{{ ftSymbol + ' ' + utilService.convertToNumber(transaction.outputCommitments[0].value) }}</td>
                      <td *ngIf="!transaction.isFailed" [title]="transaction.outputCommitments[0].commitment">{{ transaction.outputCommitments[0].commitment }}</td>
                      <td *ngIf="transaction.isFailed">
                        <i class="fa fa-ban" aria-hidden="true"></i>
                        <span class="tx-failed">TRANSACTION FAILED</span>
                      </td>
                      <td>{{ transaction.createdAt | date: 'dd/MM/yyyy hh:mm:ss a' }}</td>
                      <td></td>
                      <td></td>
                    </tr>

                     <tr *ngIf="transaction.transactionType === 'change'">
                      <td>{{ utilService.replaceUnderscores(transaction.transactionType) }}</td>
                      <td>{{ ftSymbol + ' ' + utilService.convertToNumber(transaction.outputCommitments[0].value) }}</td>
                      <td [title]="transaction.outputCommitments[0].commitment">{{ transaction.outputCommitments[0].commitment }}</td>
                      <td>{{ transaction.createdAt | date: 'dd/MM/yyyy hh:mm:ss a' }}</td>
                      <td></td>
                      <td></td>
                    </tr>

                    <tr *ngIf="transaction.transactionType === 'burn'">
                      <td>{{ utilService.replaceUnderscores(transaction.transactionType) }}</td>
                      <td>{{ ftSymbol + ' ' + utilService.convertToNumber(transaction.inputCommitments[0].value) }}</td>
                      <td *ngIf="!transaction.isFailed" [title]="transaction.inputCommitments[0].commitment">{{ transaction.inputCommitments[0].commitment }}</td>
                      <td *ngIf="transaction.isFailed">
                        <i class="fa fa-ban" aria-hidden="true"></i>
                        <span class="tx-failed">TRANSACTION FAILED</span>
                      </td>
                      <td>{{ transaction.createdAt | date: 'dd/MM/yyyy hh:mm:ss a' }}</td>
                      <td>{{transaction.receiver.name}}</td>
                      <td></td>
                    </tr>

                    <tr *ngIf="transaction.transactionType === 'transfer_incoming'">
                      <td>{{ utilService.replaceUnderscores(transaction.transactionType) }}</td>
                      <td>{{ ftSymbol + ' ' + utilService.convertToNumber(transaction.outputCommitments[0].value) }}</td>
                      <td [title]="transaction.outputCommitments[0].commitment">{{ transaction.outputCommitments[0].commitment }}</td>
                      <td>{{ transaction.createdAt | date: 'dd/MM/yyyy hh:mm:ss a' }}</td>
                      <td></td>
                      <td>{{transaction.sender.name}}</td>
                    </tr>

                    <tr data-toggle="collapse" [attr.data-target]="'#collapse-' + i" [attr.aria-controls] = "'collapse-' + i" *ngIf="transaction.transactionType === 'transfer_outgoing'">
                      <td>
                        {{ utilService.replaceUnderscores(transaction.transactionType) }}
                      </td>
                      <td>{{ transaction.receiver ? (ftSymbol + ' ' + utilService.convertToNumber(transaction.outputCommitments[0].value)) : (ftSymbol + ' ' + utilService.sumCommitmentValues(transaction.outputCommitments).value) }}</td>
                      <td title="Click to see list of commitments">
                        <span *ngIf="transaction.isFailed">
                          <i class="fa fa-ban" aria-hidden="true"></i>
                          <span class="tx-failed">TRANSACTION FAILED</span>
                        </span>
                        <span class="active fas collapsed" >View commitments</span>
                      </td>
                      <td>{{ transaction.createdAt | date: 'dd/MM/yyyy hh:mm:ss a' }}</td>
                      <td>{{transaction.receiver && transaction.receiver.name}}</td>
                      <td></td>
                    </tr>
                    <tr *ngIf="transaction.transactionType === 'transfer_outgoing'">
                      <td class="collapse-row details-pane" colspan="6">
                        <div [attr.id]="'collapse-' + i" class="collapse out">
                          <table class="details-table table table-striped" *ngIf="transaction.inputCommitments.length > 1">
                            <tr>
                              <th>Used Amount</th>
                              <th>Used Commitment</th>
                            </tr>
                            <tr *ngFor="let used_commitments of transaction.inputCommitments; index as i">
                              <td>{{ ftSymbol +' ' +utilService.convertToNumber(used_commitments.value) }}</td>
                              <td>{{used_commitments.commitment}}</td>
                            </tr>                               
                          </table>
                          <table class="details-table table table-striped" *ngIf="transaction.outputCommitments.length > 1">
                            <tr>
                              <th>Transferred Amounts</th>
                              <th>Transferred Commitments</th>
                              <th>Receiver Names</th>
                            </tr>
                            <tr *ngFor="let commitments of transaction.outputCommitments; index as i">
                              <td>{{ ftSymbol +' ' +utilService.convertToNumber(commitments.value) }}</td>
                              <td *ngIf="!transaction.isFailed">{{ commitments.commitment }}</td>
                               <td *ngIf="transaction.isFailed">
                                <i class="fa fa-ban" aria-hidden="true"></i>
                                <span class="tx-failed">TRANSACTION FAILED</span>
                              </td>
                              <td *ngIf="!transaction.isFailed">{{ commitments.owner.name }}</td>
                              <td *ngIf="transaction.isFailed"></td>
                            </tr>                               
                          </table>
                        </div>
                      </td>
                    </tr>
                  </ng-container>
                </tbody>
              </table>
              <ngb-pagination
                *ngIf="isPagination"
                class="d-flex justify-content-end zkp-pagination"
                (pageChange)="pageChanged($event)"
                [collectionSize]="totalCollection | async"
                [pageSize]="pageSize"
                [(page)]="pageNo"
                aria-label="Default pagination"
              ></ngb-pagination>
            </ng-template>
          </ngb-tab>
        </ngb-tabset>
      </div>
    </div>
  </div>
</div>
